<template>
	<div class="customerTags">
		<el-card shadow="hover">
			<div class="customer-tags-search mb15">
				<el-button size="default" type="success" class="ml10" @click="addPrompt"> 新增标签 </el-button>
			</div>
			<el-table :data="tableData">
				<el-table-column prop="orderNumber" label="序号" show-overflow-tooltip></el-table-column>
				<el-table-column prop="name" label="标签名字" show-overflow-tooltip></el-table-column>
				<el-table-column prop="name" label="是否启用" show-overflow-tooltip>
					<template #default="scope">
						<el-switch v-model="scope.row.isEnabled" @change="() => editFun(scope.row)" />
					</template>
				</el-table-column>
				<el-table-column label="操作" width="260px">
					<template #default="scope">
						<el-button text type="primary" @click="beforeEdit(scope.row)">编辑</el-button>
						<el-button text type="danger" @click="beforeDelete(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
	</div>
</template>
<script setup name="CustomerTags">
import { ElMessage, ElMessageBox } from 'element-plus';
import { useTagsApi } from '/@/api/common/tags';
import tagState from '/@/utils/pageState/tagState';

const { addTags, delTagsById, editTags, getTagsList } = useTagsApi();
const { DISABLE_TAG, ENABLE_TAG, getBooleanByState } = tagState();

let tableData = ref([]);
let loading = ref(false);
let addLoading = ref(false);

// 获取列表
async function getList() {
	if (loading.value) {
		return;
	}
	loading.value = true;
	try {
		let res = await getTagsList();
		if (res.code !== 200) {
			loading.value = false;
			return;
		}
		loading.value = false;

		let tempList = [];
		tempList = res.data.map((item, index) => {
			return {
				id: item.id,
				orderNumber: index + 1,
				name: item.tagName,
				isEnabled: getBooleanByState(item.status),
			};
		});

		tableData.value = tempList;
	} catch (error) {
		loading.value = false;
		ElMessage({
			type: 'error',
			message: '获取标签列表失败',
		});
	}
}

// 新增的弹窗
function addPrompt() {
	ElMessageBox.prompt('', '新增标签', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/,
		inputErrorMessage: '标签不能为空',
	})
		.then(({ value }) => {
			addFun(value);
		})
		.catch(() => {});
}

// 新增
async function addFun(value) {
	if (addLoading.value) {
		return;
	}
	addLoading.value = true;

	try {
		let params = {
			status: ENABLE_TAG,
			tagName: value,
		};
		let res = await addTags(params);
		if (res.code !== 200) {
			addLoading.value = false;
			return;
		}
		addLoading.value = false;
		ElMessage({
			type: 'success',
			message: '新增成功',
		});
		getList();
	} catch (error) {
		addLoading.value = false;
		ElMessage({
			type: 'error',
			message: '新增失败',
		});
	}
}

// 删除的询问
function beforeDelete(item) {
	// 提示是否删除
	ElMessageBox.confirm(`确认删除标签${item.name}？`, '删除标签', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(() => {
			delFun(item);
		})
		.catch(() => {});
}

// 删除
async function delFun(item) {
	if (loading.value) {
		return;
	}
	loading.value = true;

	try {
		let params = {
			id: item.id,
		};
		let res = await delTagsById(params.id);
		if (res.code !== 200) {
			loading.value = false;
			return;
		}
		loading.value = false;
		ElMessage({
			type: 'success',
			message: '删除成功',
		});
		getList();
	} catch (error) {
		loading.value = false;
		ElMessage({
			type: 'error',
			message: '删除失败',
		});
	}
}

// 编辑的回显
function beforeEdit(item) {
	ElMessageBox.prompt('', '修改标签', {
		inputValue: item.name,
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/,
		inputErrorMessage: '标签不能为空',
	})
		.then(({ value }) => {
			item.name = value;
			editFun(item);
		})
		.catch(() => {
			console.log('');
		});
}

// 编辑
async function editFun(item) {
	if (loading.value) {
		return;
	}
	loading.value = true;
	try {
		let params = {
			id: item.id,
			status: !item.isEnabled ? DISABLE_TAG : ENABLE_TAG,
			tagName: item.name,
		};
		let res = await editTags(params);
		if (res.code !== 200) {
			loading.value = false;
			return;
		}
		ElMessage({
			type: 'success',
			message: '修改启用状态成功',
		});
		loading.value = false;
		getList();
	} catch (error) {
		loading.value = false;
		ElMessage({
			type: 'error',
			message: '修改启用状态失败',
		});
	}
}

onMounted(() => {
	getList();
});
</script>
<style lang="scss" scoped></style>
